<template>
  <t-loading :loading="loading">
    <t-form v-if="type === 'detail'" label-align="left" ref="form" colon :data="formData">
      <t-space size="large" direction="vertical" style="width: 90%; margin: 0 5%">
        <t-row style="align-items: stretch" :gutter="[16, 16]" justify="space-around">
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目名称" name="projectName">
              {{ formData.projectName }}
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6"> </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="办公费" name="bgf"> {{ formData.bgf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="差旅费" name="clf"> {{ formData.clf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="技术服务费" name="jsfwf"> {{ formData.jsfwf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="车辆租赁费" name="clzlf"> {{ formData.clzlf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="市内交通费" name="snjtf"> {{ formData.snjtf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="过路费" name="glf"> {{ formData.glf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="车辆燃油费" name="clryf"> {{ formData.clryf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="邮寄费" name="yjf"> {{ formData.yjf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="专家评审费" name="zjpsf"> {{ formData.zjpsf }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="资料费" name="zlf"> {{ formData.zlf }}万元 </t-form-item>
          </t-col>
        </t-row>
      </t-space>
    </t-form>
    <t-form v-else label-align="left" ref="form" colon :data="formData" :rules="rules">
      <t-space size="large" direction="vertical" style="width: 90%; margin: 0 5%">
        <t-row style="align-items: stretch" :gutter="[16, 16]" justify="space-around">
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目名称" name="projectName">
              <t-select style="width: 70%" :options="projectNameOptions" clearable v-model="formData.projectName" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6"> </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="办公费" name="bgf">
              <t-input-number style="width: 70%" :step="step" clearable v-model="formData.bgf" :min="0" suffix="万元" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="差旅费" name="clf">
              <t-input-number style="width: 70%" :step="step" clearable v-model="formData.clf" :min="0" suffix="万元" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="技术服务费" name="jsfwf">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.jsfwf"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="车辆租赁费" name="clzlf">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.clzlf"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="市内交通费" name="snjtf">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.snjtf"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="过路费" name="glf">
              <t-input-number style="width: 70%" :step="step" clearable v-model="formData.glf" :min="0" suffix="万元" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="车辆燃油费" name="clryf">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.clryf"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="邮寄费" name="yjf">
              <t-input-number style="width: 70%" :step="step" clearable v-model="formData.yjf" :min="0" suffix="万元" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="专家评审费" name="zjpsf">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.zjpsf"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="资料费" name="zlf">
              <t-input-number style="width: 70%" :step="step" clearable v-model="formData.zlf" :min="0" suffix="万元" />
            </t-form-item>
          </t-col>
        </t-row>
      </t-space>
    </t-form>
  </t-loading>
</template>
    
<script>
export default {
  name: 'add-edit-detail',
  components: {},
  props: {
    objId: [String, Number],
    header: String,
    type: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      rules: {
        projectName: [{ required: true, message: '项目名称不能为空' }],
        bgf: [{ required: true, message: '办公费不能为空' }],
        clf: [{ required: true, message: '差旅费不能为空' }],
        jsfwf: [{ required: true, message: '技术服务费不能为空' }],
        clzlf: [{ required: true, message: '车辆租赁费不能为空' }],
        snjtf: [{ required: true, message: '市内交通费不能为空' }],
        glf: [{ required: true, message: '过路费不能为空' }],
        clryf: [{ required: true, message: '车辆燃油费不能为空' }],
        yjf: [{ required: true, message: '邮寄费不能为空' }],
        zjpsf: [{ required: true, message: '专家评审费不能为空' }],
        zlf: [{ required: true, message: '资料费不能为空' }],
      },
      step: 0.5,
      formData: {
        projectName: '',
        bgf: 0,
        clf: 0,
        jsfwf: 0,
        clzlf: 0,
        snjtf: 0,
        glf: 0,
        clryf: 0,
        yjf: 0,
        zjpsf: 0,
        zlf: 0,
      },
      loading: false,
      projectNameOptions: [],
    };
  },
  watch: {
    'formData.projectName': {
      handler(val) {
        this.formData.projectId = this.projectNameOptions.find((row) => row.label === val)?.id;
      },
      immediate: true,
    },
  },
  created() {
    if (this.type !== 'add') {
      this.$api.kjxm.expenditure
        .budgetDeclarationDetail(this.objId)
        .then((res) => {
          Object.assign(this.formData, res.data);
          this.$forceUpdate();
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    } else {
      this.$api.kjxm.project
        .myList()
        .then((res) => {
          res.rows.forEach((row) => {
            this.projectNameOptions.push({ label: row.projectName, value: row.projectName, id: row.id });
          });
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.loading = true;
          if (this.type === 'add') {
            this.$api.kjxm.expenditure
              .addBudgetDeclaration(this.formData)
              .then(() => {
                this.$message.success('新增成功');
                this.$emit('reload');
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          } else {
            this.$api.kjxm.expenditure
              .updateBudgetDeclaration(this.formData)
              .then(() => {
                this.$message.success('修改成功');
                this.$emit('reload');
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          }
        }
      });
    },
  },
};
</script>
